<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<!DOCTYPE HTML>
<head>
<title>在线商城</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link href="css/style.css" rel="stylesheet" type="text/css" media="all"/>
<link href="css/slider.css" rel="stylesheet" type="text/css" media="all"/>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> 
<script type="text/javascript" src="js/move-top.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
<script type="text/javascript" src="js/startstop-slider.js"></script>
</head>
<body>
  <div class="wrap">
  
	
   <%@ include file="_common_header.jsp"%>
   
   
   
 <div class="main">
 <div class="header_slide">
			<div class="header_bottom_left">				
				<div class="categories">
				  <ul>
				  	<h3>分类</h3>
				  	
				  	
				  	<c:forEach items="${categories}" var="category">
		    			<li><a href="#">${category.cname }</a></li>
	    			</c:forEach>
				  	
				  	
				  </ul>
				</div>					
	  	     </div>
					 <div class="header_bottom_right">					 
					 	 <div class="slider">					     
							 <div id="slider">
			                    <div id="mover">
			                    	<div id="slide-1" class="slide">			                    
									 <div class="slider-img">
									     <a href="preview.html"><img src="images/slide-1-image.png" alt="learn more" /></a>									    
									  </div>
						             	<div class="slider-text">
		                                 <h1>Clearance<br><span>SALE</span></h1>
		                                 <h2>UPTo 20% OFF</h2>
									   <div class="features_list">
									   	<h4>Get to Know More About Our Memorable Services Lorem Ipsum is simply dummy text</h4>							               
							            </div>
							             <a href="preview.html" class="button">Shop Now</a>
					                   </div>			               
									  <div class="clear"></div>				
				                  </div>	
						             	<div class="slide">
						             		<div class="slider-text">
		                                 <h1>Clearance<br><span>SALE</span></h1>
		                                 <h2>UPTo 40% OFF</h2>
									   <div class="features_list">
									   	<h4>Get to Know More About Our Memorable Services</h4>							               
							            </div>
							             <a href="preview.html" class="button">Shop Now</a>
					                   </div>		
						             	 <div class="slider-img">
									     <a href="preview.html"><img src="images/slide-3-image.jpg" alt="learn more" /></a>
									  </div>						             					                 
									  <div class="clear"></div>				
				                  </div>
				                  <div class="slide">						             	
					                  <div class="slider-img">
									     <a href="preview.html"><img src="images/slide-2-image.jpg" alt="learn more" /></a>
									  </div>
									  <div class="slider-text">
		                                 <h1>Clearance<br><span>SALE</span></h1>
		                                 <h2>UPTo 10% OFF</h2>
									   <div class="features_list">
									   	<h4>Get to Know More About Our Memorable Services Lorem Ipsum is simply dummy text</h4>							               
							            </div>
							             <a href="preview.html" class="button">Shop Now</a>
					                   </div>	
									  <div class="clear"></div>				
				                  </div>												
			                 </div>		
		                </div>
					 <div class="clear"></div>					       
		         </div>
		      </div>
		   <div class="clear"></div>
		</div>
    <div class="content">
    	<div class="content_top">
    		<div class="heading">
    		<h3>全部商品</h3>
    		</div>
    		<div class="see">
    			<p><a href="#">查看全部商品</a></p>
    		</div>
    		<div class="clear"></div>
    	</div>
	      <div class="section group">
	     
	     
	     <c:forEach begin="1" end="${requestScope.productPage.pageCount}" varStatus="status">
                <a <c:if test="${requestScope.productPage.currentPage == status.count}">class="active"</c:if> href="/list?<c:if test="${requestScope.productPage.cid!=null}">cid=${requestScope.productPage.cid}&</c:if><c:if test="${requestScope.productPage.bid!=null}">bid=${requestScope.productPage.bid}&</c:if><c:if test="${requestScope.productPage.keyWord!=null}">keyWord=${requestScope.productPage.keyWord}&</c:if>page=${status.count}"><span>&nbsp;&nbsp;&nbsp;&nbsp;${status.count}&nbsp;&nbsp;&nbsp;&nbsp;</span></a>
            </c:forEach>
	     
	     
	     
	      <c:forEach items="${products }" var="p" varStatus="status">
	      
		  	<div class="grid_1_of_4 images_1_of_4" <c:if test="${(status.count-1) % 4 == 0 }">style="margin-left:0;"</c:if> >
					 <a href="detail?pid=${p.pid }"><img src="${pageContext.request.contextPath }${p.pimage}" alt="" /></a>
					 <h2>${p.pname}</h2>		
					<div class="price-details">
				       <div class="price-number">
			
							<p><span class="rupees">￥${p.shopPrice }</span></p>
					    </div>
					
					       		<div class="add-cart">								
									<h4><a href="#">Add to Cart</a></h4>
							     </div>
							 <div class="clear"></div>
					</div>
			</div>
	      </c:forEach>
	      
			</div>
			
    </div>
 </div>
</div>
   
   
   
   <%@ include file="_common_footer.jsp"%>
   
   
   
    <script type="text/javascript">
		$(document).ready(function() {			
			$().UItoTop({ easingType: 'easeOutQuart' });
			
		});
	</script>
    <a href="#" id="toTop"><span id="toTopHover"> </span></a>
<div style="display:none"><script type="text/javascript">var cnzz_protocol = (("https:" == 
document.location.protocol) ? " https://" : " http://");document.write(unescape
("%3Cspan id='cnzz_stat_icon_1253604486'%3E%3C/span%3E%3Cscript src='" + 
cnzz_protocol + "s4.cnzz.com/z_stat.php%3Fid%3D1253604486' 
type='text/javascript'%3E%3C/script%3E"));</script></div>
</body>
</html>

